<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="在线答题">
  <meta name="description" content="在线答题是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
  <title>在线答题APP后台管理系统</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link href="Styles/css/bootstrap.min.css" rel="stylesheet">
  <link href="Styles/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  <link href="Styles/css/animate.min.css" rel="stylesheet">
  <link href="Styles/css/style.min.css" rel="stylesheet">
  <link href="Styles/css/login.min.css" rel="stylesheet">
  <link href="Styles/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
  <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
  <script>
    if (window.top !== window.self) {
      window.top.location = window.location
    };
  </script>
</head>

<body class="signin">
  <div class="signinpanel">
    <div class="row">
      <div class="col-sm-7">
        <div class="signin-info">
          <div class="logopanel m-b">
            <h1>在线答题</h1>
          </div>
          <div class="m-b"></div>
          <h4>欢迎使用 <strong>在线答题APP管理后台</strong></h4>
          <ul class="m-b">
            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势一：自适应布局</li>
            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势二：瞎扯的</li>
            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势三：不知道</li>
            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势四：跨平台</li>
            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势五：简单易用</li>
          </ul>
          <strong>还没有账号？ <a href="#">立即注册&raquo;</a></strong>
        </div>
      </div>
      <div class="col-sm-5">
        <form id="loginForm">
          <h4 class="no-margins">登录：</h4>
          <p class="m-t-md">登录到在线答题APP后台管理系统</p>
          <input type="text" class="form-control uname" id="uname" name="uname" placeholder="用户名" />
          <input type="password" class="form-control pword m-b" id="pwd" name="pwd" placeholder="密码" />
          <a href="#">忘记密码了？</a>
          <button class="btn btn-success btn-block" type="submit">登录</button>
        </form>
      </div>
    </div>
    <div class="signup-footer">
      <div class="pull-left">
        &copy; 2020 All Rights Reserved. GUFENG
      </div>
    </div>
  </div>
  <script src="Scripts/jquery.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
  <script src="Scripts/content.min.js"></script>
  <script src="Scripts/plugins/validate/jquery.validate.min.js"></script>
  <script src="Scripts/plugins/validate/messages_zh.min.js"></script>
  <script src="Scripts/plugins/sweetalert/sweetalert.min.js"></script>
  <!-- <script src="Scripts/plugins/layer/layer.js"></script> -->
  <script>
    $(function () {
      $("#loginForm").validate({
        rules: { //验证规则
          uname: {
            required: true,
            maxlength: 20
          },
          pwd: {
            required: true,
            minlength: 6,
            maxlength: 20
          }
        },
        messages: { //对应的提示
          uname: {
            required: "用户名必填",
            maxLength: "用户名最长20个字符(汉字)"
          },
          pwd: {
            required: "密码必填",
            minLength: "密码最短为6个字符",
            maxLength: "密码最长为20个字符"
          }
        },
        //debug: true,
        submitHandler: function (form) { //提交方法
          var data = $(form).serializeArray();
          $.post('http://localhost:5000/User', data, function (result) { //边缘弹出
            swal({
              title: "系统提示",
              text: result.message,
              type: result.status ? "success" : "warning",
            }, function () {
              if (result.status) {
                //将用户数据存到本地
                setStorage("user",result.user);
                window.location.href = "index.html";
              } else {
                window.location.href = window.location.href;
              }
            });
          });
        }
      });
    });
  </script>
</body>

</html>